<template>
	<view>
		<view class="" style="display: flex;flex-direction: row-reverse;">
			<view class="" style="margin-right: 20rpx;">
				<u-button type="primary" size="medium" @click="addClass" >新增</u-button>
			</view>
		</view>
		<view class="" style="width: 100%;padding: 0 20rpx; margin-top: 20rpx;" v-for="item in classList"
			:key="item.id">
			<view class="aaa"
				style="width: 100%;height: 100%;display: flex;flex-direction: row;align-items: center;justify-content: space-between;border-radius: 20rpx;padding: 40rpx 0;">
				<view class=""
					style=" width: 65%;display: flex;flex-direction: column;margin-left: 20rpx;justify-content: space-around;font-size: 30rpx;">
					<view style="padding-bottom: 10rpx;display: flex;flex-direction: row;align-items: center;">
						{{item.name}} <text style="margin-left: 20rpx;">排序：{{item.sort}}</text>
					</view>
					<view style="" class="beizhu">
						{{item.categoryDesc}}
					</view>
				</view>
				<view style="display: flex;flex-direction: row;margin-right: 20rpx;">
					<u-button type="error" :disabled="item.goodsStatus == 0" @click="delGoods(item.id)" size="mini" style="margin-right: 10rpx;">删除</u-button>
					<u-button type="success" v-if="item.goodsStatus == -1" size="mini"
						@click="grounding(item.id)">上架</u-button>
					<u-button type="warning" v-if="item.goodsStatus == 0" size="mini"
						@click="undercarriage(item.id)">下架</u-button>
					<u-button type="primary" @click="addClass(item.id)" style="margin-left: 10rpx;" size="mini">编辑</u-button>
				</view>
			</view>
		</view>
		<u-toast ref="uToast" />
		<u-modal show-cancel-button="true" v-model="onshow" @confirm="onconfirm" content="确要上架该分类"></u-modal>
		<u-modal show-cancel-button="true" v-model="offshow" @confirm="offconfirm" content="下架后该分类商品也会下架,请确认!"></u-modal>
		<u-modal show-cancel-button="true" v-model="delshow" @confirm="delconfirm" content="删除后改分类下的商品也会删除,请确认!"></u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				onshow: false,
				offshow:false,
				delshow:false,
				classList:[]
			}
		},
		onShow() {
			this.getClass()
		},
		methods: {
			getClass(){
				this.$u.get("/life/goods/category/list", {
					status: 0
				}).then(res => {
					console.log(res);
					if (res.success) {
						this.classList = res.data
					}
				})
			},
			addClass(e){
				console.log(typeof(e));
				if(typeof(e) == 'string'){
					console.log("准备进入编辑页面");
					uni.navigateTo({
						url:'/pages/shopSonPage/add-edit-classification/add-edit-classification?id=' + e
					})
				}else{
					uni.navigateTo({
						url:'/pages/shopSonPage/add-edit-classification/add-edit-classification'
					})
				}
			
			},
			onconfirm() {
				this.$u.put("life/goods/category/on", this.onArr).then(res => {
					console.log("上架");
					console.log(res);
					if (res.success) {
						this.$refs.uToast.show({
							title: "上架成功",
							type: 'success',
						})
						this.getClass()
					}
				}).catch(() => {
					this.$refs.uToast.show({
						title: "操作失败",
						type: 'error',
					})
				})
			},
			//上架
			grounding(e) {
				console.log(e);
				this.onArr = []
				this.onArr.push(e)
				this.onshow = true
			
			
			},
			offconfirm(){
				this.$u.put("life/goods/category/off", this.offArr).then(res => {
					console.log("下架");
					console.log(res);
					if (res.success) {
						this.$refs.uToast.show({
							title: "下架成功",
							type: 'success',
						})
						this.getClass()
					}
				}).catch(() => {
					this.$refs.uToast.show({
						title: "操作失败",
						type: 'error',
					})
				})
			},
			//下架
			undercarriage(e) {
				console.log(e);
				this.offArr = []
				this.offArr.push(e)
				this.offshow = true;
				
			},
			delGoods(e){
				this.delArr = []
				this.delArr.push(e)
				this.delshow = true
			},
			//删除商品
			delconfirm(){
				this.$u.delete("life/goods/category/remove", this.delArr).then(res => {
					console.log(res);
					if (res.success) {
						this.$refs.uToast.show({
							title: "删除成功",
							type: 'success',
						})
						this.getClass()
					}
				}).catch(() => {
					this.$refs.uToast.show({
						title: "操作失败",
						type: 'error',
					})
				})
			},
		}
	}
</script>

<style>
.aaa{
/* 	background-image: -moz-linear-gradient(45deg, rgb(153, 133, 255), rgb(29, 218, 255));
	
	background-image: -webkit-linear-gradient(45deg,rgb(153, 133, 255), rgb(29, 218, 255));
	
	background-image: linear-gradient(45deg,rgb(153, 133, 255),rgb(29, 218, 255)); */
		background-color: #f0f0f0;
	
}

</style>
